<template>
  <!--视图-->
  <div>
    <div class="positionBox">
      <div id="allmap"></div>
      <el-drawer
          size="80%"  :visible.sync="drawer" :show-close="false" :with-header="false"
      >
        <el-divider content-position="left">物流追踪</el-divider>
      </el-drawer>
      <el-button @click="drawer = true" type="primary">
        点我打开
      </el-button>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "TuView",
  data() {//属性
    return {
      map: null,
      drawer: false,
    };
  }, methods: {//自定义方法
    loadmap() {
      return new Promise((reslove, reject) => {
        AMapLoader.load({
          key: "xxxxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
          // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 缺省 1.1
            plugins: [] // 需要加载的 AMapUI ui插件
          }
        }).then(AMap => {
          this.map = new AMap.Map("allmap", {
            resizeEnable: true,
            zoom: 10,
            // center: [116.397428, 39.90923] //中心点坐标
          });

          //地图控件
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.ToolBar());
          this.map.setZoom(14); //设置缩放大小
          this.trajectory();
          reslove();
        })
            .catch(e => {
              console.log(e, "高德地图加载失败");
              reject(e);
            });
      });
    },
    // 轨迹
    trajectory() {
      // eslint-disable-next-line no-undef
      AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier) => {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }

        let pathSimplifierIns = new PathSimplifier({
          zIndex: 100,
          //autoSetFitView:false,
          map: this.map, //所属的地图实例

          getPath: function(pathData) {
            return pathData.path;
          },
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            if (pointIndex >= 0) {
              //point
              return (
                  pathData.name +
                  "，点：" +
                  pointIndex +
                  "/" +
                  pathData.path.length
              );
            }

            return pathData.name + "，点数量" + pathData.path.length;
          },
          renderOptions: {
            renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
          }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        //设置数据
        pathSimplifierIns.setData([
          {
            name: "路线0",
            path: [
              [116.405289, 39.904987],
              [113.964458, 40.54664],
              [111.47836, 41.135964],
              [108.949297, 41.670904],
              [106.380111, 42.149509],
              [103.774185, 42.56996],
              [101.135432, 42.930601],
              [98.46826, 43.229964],
              [95.777529, 43.466798],
              [93.068486, 43.64009],
              [90.34669, 43.749086],
              [87.61792, 43.793308]
            ]
          }
        ]);

        //对第一条线路（即索引 0）创建一个巡航器
        let trajectory = pathSimplifierIns.createPathNavigator(0, {
          loop: true, //循环播放
          speed: 1000000 //巡航速度，单位千米/小时
        });

        trajectory.start();
      });
    }

  }, created() { //钩子函数
    this.loadmap();
  }
}
</script>


<style scoped>
#allmap {
  width: 100%;
  height: 500px;
}
</style>